<template>
<div class="mainContainer">
    <!-- <h3>我是子组件</h3>
<div>{{ props.title }}</div>
<div>{{ props.parentDatas.nickName }}</div>

<ul>
    <li v-for="item in fridends" :key="item.id">年龄“{{ item.age}}---姓名{{ item.name }}</li>
</ul> -->
</div>
<input type="text" name="" id="" :placeholder="placeholderText">
</template>
<script setup lang="ts" >
import {ref} from 'vue'
//接收父组件传来的数据
//defineProps:接收父组件传来的数据
let props= defineProps(['title','parentDatas','riends','placeholder'])
    
console.log(props);
console.log(props.title);

//emit:子组件向父组件传数据
//defineEmits:子组件向父组件传数据
// let emit=defineEmits(['myEvent'])
// emit('myEvent','子组件向父组件传数据')
let name='Mycomponents';
let jiangbao={
    nickName:"张三",
    sex:"woman",
    age:18,
    checkedNames:["乒乓球"],
    city:"南宁"
}
//子组件已经暴露给父组件一些数据
// defineExpose([name,jiangbao])
defineExpose({name,jiangbao})

// let fridends=[{ id:0,name:"李四",age:20},{id:1,name:"王五",age:21},{id:2,name:"赵六",age:22}]
let fridends=props.riends


let placeholderText=ref(props.placeholder) 
</script>

<!-- 当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素，
和 Shadow DOM 中的样式封装类似。 -->
<!-- 孩子可以有父亲的样式，父亲不能有孩子的样式 -->
 <!-- 类名与父类名相同，子类优先级高,子类没有的样式，父类有，则父类样式生效 -->


 
<style scoped>
.mainContainer{
    border-style:double
}
</style>